<div class="row">
  <div class="col">
    <div class="card mt-4">
      <div class="card-header">
        {{ t('Two-factor authentication status') }}
        {{ show_docu('two_factor') }}
      </div>
      <div class="card-body">
    {% if enabled %}
      {% if num_backends == 0 %}
        <p>{{ t('Two-factor authentication is not available, please install optional dependencies to enable authentication backends.') }}</p>
        <p>{{ t('Following composer packages are missing:') }}</p>
        <ul>
          {% for item in missing %}
            <li><code>{{ item.dep }}</code> ({{ item.class }})</li>
          {% endfor %}
        </ul>
      {% else %}
        {% if backend_id %}
          <p>{{ t('Two-factor authentication is available and configured for this account.') }}</p>
        {% else %}
          <p>{{ t('Two-factor authentication is available, but not configured for this account.') }}</p>
        {% endif %}
        {% if missing|length > 0 %}
          <p>
            {{ t('Please install optional dependencies to enable more authentication backends.') }}
            {{ t('Following composer packages are missing:') }}
          </p>
          <ul>
            {% for item in missing %}
              <li><code>{{ item.dep }}</code> ({{ item.class }})</li>
            {% endfor %}
          </ul>
        {% endif %}
      {% endif %}
    {% else %}
      <p>{{ t('Two-factor authentication is not available, enable phpMyAdmin configuration storage to use it.') }}</p>
    {% endif %}
      </div>
    </div>
  </div>
</div>

{% if backend_id %}
<div class="row">
  <div class="col">
    <div class="card mt-4">
      <div class="card-header">
        {{ backend_name }}
      </div>
      <div class="card-body">
      <p>{{ t('You have enabled two factor authentication.') }}</p>
      <p>{{ backend_description }}</p>
      {% if backend_id == 'key' %}
        <div class="alert alert-danger" role="alert">
          <h4 class="alert-heading">{{ t('Deprecated!') }}</h4>
          <p>{{ t('The FIDO U2F API has been deprecated in favor of the Web Authentication API (WebAuthn).') }}</p>
          <p class="mb-0">
            {{ t('You can still use Firefox to authenticate your account using the FIDO U2F API, however it\'s recommended that you use the WebAuthn authentication instead.') }}
          </p>
        </div>
      {% endif %}
      <form method="post" action="{{ url('/preferences/two-factor') }}">
        {{ get_hidden_inputs() }}
        <input class="btn btn-secondary" type="submit" name="2fa_remove" value="
          {{- t('Disable two-factor authentication') }}">
      </form>
      </div>
    </div>
  </div>
</div>
{% elseif num_backends > 0 %}
<div class="row">
  <div class="col">
    <div class="card mt-4">
      <div class="card-header">
        {{ t('Configure two-factor authentication') }}
      </div>
      <div class="card-body">
      <form method="post" action="{{ url('/preferences/two-factor') }}">
        {{ get_hidden_inputs() }}
        {% for backend in backends %}
          <label class="d-block">
            <input type="radio" name="2fa_configure" value="{{ backend["id"] }}"
              {{- backend["id"] == "" ? ' checked' }}>
            <strong>{{ backend["name"] }}</strong>
            <p>
              {%- if backend['id'] == 'key' -%}
                <span class="text-danger">
                  {{ t('The FIDO U2F API has been deprecated in favor of the Web Authentication API (WebAuthn).') }}
                </span>
                <br>
              {%- endif -%}
              {{ backend["description"] }}
            </p>
          </label>
        {% endfor %}
        <input class="btn btn-secondary" type="submit" value="{{ t('Configure two-factor authentication') }}">
      </form>
      </div>
    </div>
  </div>
</div>
{% endif %}
